export const worldMap2 = () => {
    return `

    <template>
    <div>
      <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, nextTick, onMounted } from "vue";
  import "echarts";
  /*
    基本数据类型
    引用数据类型（复杂类型） 个人建议 ref初始化变量 
    ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
    ref定义的数据访问的时候要多一个.value 104.1276279°，纬度30.5370628°
    */
  var geoCoordMap = {
    阿富汗: [67.709953, 33.93911],
    安哥拉: [17.873887, -11.202692],
    阿尔巴尼亚: [20.168331, 41.153332],
    阿联酋: [53.847818, 23.424076],
    阿根廷: [-63.61667199999999, -38.416097],
    亚美尼亚: [45.038189, 40.069099],
    法属南半球和南极领地: [69.348557, -49.280366],
    澳大利亚: [133.775136, -25.274398],
    奥地利: [14.550072, 47.516231],
    阿塞拜疆: [47.576927, 40.143105],
    布隆迪: [29.918886, -3.373056],
    比利时: [4.469936, 50.503887],
    贝宁: [2.315834, 9.30769],
    布基纳法索: [-1.561593, 12.238333],
    孟加拉国: [90.356331, 23.684994],
    保加利亚: [25.48583, 42.733883],
    巴哈马: [-77.39627999999999, 25.03428],
    波斯尼亚和黑塞哥维那: [17.679076, 43.915886],
    白俄罗斯: [27.953389, 53.709807],
    伯利兹: [-88.49765, 17.189877],
    百慕大: [-64.7505, 32.3078],
    玻利维亚: [-63.58865299999999, -16.290154],
    巴西: [-51.92528, -14.235004],
    文莱: [114.727669, 4.535277],
    不丹: [90.433601, 27.514162],
    博茨瓦纳: [24.684866, -22.328474],
    中非共和国: [20.939444, 6.611110999999999],
    加拿大: [-106.346771, 56.130366],
    瑞士: [8.227511999999999, 46.818188],
    智利: [-71.542969, -35.675147],
    中国: [88.8946661, 37.0731642],
    象牙海岸: [-5.547079999999999, 7.539988999999999],
    喀麦隆: [12.354722, 7.369721999999999],
    刚果民主共和国: [21.758664, -4.038333],
    刚果共和国: [15.827659, -0.228021],
    哥伦比亚: [-74.297333, 4.570868],
    哥斯达黎加: [-83.753428, 9.748916999999999],
    古巴: [-77.781167, 21.521757],
    北塞浦路斯: [33.429859, 35.126413],
    塞浦路斯: [33.429859, 35.126413],
    捷克共和国: [15.472962, 49.81749199999999],
    德国: [10.451526, 51.165691],
    吉布提: [42.590275, 11.825138],
    丹麦: [9.501785, 56.26392],
    多明尼加共和国: [-70.162651, 18.735693],
    阿尔及利亚: [1.659626, 28.033886],
    厄瓜多尔: [-78.18340599999999, -1.831239],
    埃及: [30.802498, 26.820553],
    厄立特里亚: [39.782334, 15.179384],
    西班牙: [-3.74922, 40.46366700000001],
    爱沙尼亚: [25.013607, 58.595272],
    埃塞俄比亚: [40.489673, 9.145000000000001],
    芬兰: [25.748151, 61.92410999999999],
    斐: [178.065032, -17.713371],
    福克兰群岛: [-59.523613, -51.796253],
    法国: [2.213749, 46.227638],
    加蓬: [11.609444, -0.803689],
    英国: [-3.435973, 55.378051],
    格鲁吉亚: [-82.9000751, 32.1656221],
    加纳: [-1.023194, 7.946527],
    几内亚: [-9.696645, 9.945587],
    冈比亚: [-15.310139, 13.443182],
    几内亚比绍: [-15.180413, 11.803749],
    赤道几内亚: [10.267895, 1.650801],
    希腊: [21.824312, 39.074208],
    格陵兰: [-42.604303, 71.706936],
    危地马拉: [-90.23075899999999, 15.783471],
    法属圭亚那: [-53.125782, 3.933889],
    圭亚那: [-58.93018, 4.860416],
    洪都拉斯: [-86.241905, 15.199999],
    克罗地亚: [15.2, 45.1],
    海地: [-72.285215, 18.971187],
    匈牙利: [19.503304, 47.162494],
    印尼: [113.921327, -0.789275],
    印度: [78.5553853, 12.0201385],
    爱尔兰: [-8.24389, 53.41291],
    伊朗: [53.688046, 32.427908],
    伊拉克: [43.679291, 33.223191],
    冰岛: [-19.020835, 64.963051],
    以色列: [34.851612, 31.046051],
    意大利: [12.56738, 41.87194],
    牙买加: [-77.297508, 18.109581],
    约旦: [36.238414, 30.585164],
    日本: [142.1364432, 44.8147265],
    新加坡: [101.7727739, -0.0589018],
    哈萨克斯坦: [66.923684, 48.019573],
    肯尼亚: [37.906193, -0.023559],
    吉尔吉斯斯坦: [74.766098, 41.20438],
    柬埔寨: [104.990963, 12.565679],
    韩国: [127.766922, 35.907757],
    科索沃: [20.902977, 42.6026359],
    科威特: [47.481766, 29.31166],
    老挝: [102.495496, 19.85627],
    黎巴嫩: [35.862285, 33.854721],
    利比里亚: [-9.429499000000002, 6.428055],
    利比亚: [17.228331, 26.3351],
    斯里兰卡: [80.77179699999999, 7.873053999999999],
    莱索托: [28.233608, -29.609988],
    立陶宛: [23.881275, 55.169438],
    卢森堡: [6.129582999999999, 49.815273],
    拉脱维亚: [24.603189, 56.879635],
    摩洛哥: [-7.092619999999999, 31.791702],
    摩尔多瓦: [28.369885, 47.411631],
    马达加斯加: [46.869107, -18.766947],
    墨西哥: [-102.552784, 23.634501],
    马其顿: [21.745275, 41.608635],
    马里: [-3.996166, 17.570692],
    缅甸: [95.956223, 21.913965],
    黑山: [19.37439, 42.708678],
    蒙古: [103.846656, 46.862496],
    莫桑比克: [35.529562, -18.665695],
    毛里塔尼亚: [-10.940835, 21.00789],
    马拉维: [34.301525, -13.254308],
    马来西亚: [101.975766, 4.210484],
    纳米比亚: [18.49041, -22.95764],
    新喀里多尼亚: [165.618042, -20.904305],
    尼日尔: [8.081666, 17.607789],
    尼日利亚: [8.675277, 9.081999],
    尼加拉瓜: [-85.207229, 12.865416],
    荷兰: [5.291265999999999, 52.132633],
    挪威: [8.468945999999999, 60.47202399999999],
    尼泊尔: [84.12400799999999, 28.394857],
    新西兰: [174.885971, -40.900557],
    阿曼: [55.923255, 21.512583],
    巴基斯坦: [69.34511599999999, 30.375321],
    巴拿马: [-80.782127, 8.537981],
    秘鲁: [-75.015152, -9.189967],
    菲律宾: [121.774017, 12.879721],
    巴布亚新几内亚: [143.95555, -6.314992999999999],
    波兰: [19.145136, 51.919438],
    波多黎各: [-66.590149, 18.220833],
    北朝鲜: [127.510093, 40.339852],
    葡萄牙: [-8.224454, 39.39987199999999],
    巴拉圭: [-58.443832, -23.442503],
    卡塔尔: [51.183884, 25.354826],
    罗马尼亚: [24.96676, 45.943161],
    俄罗斯: [105.318756, 61.52401],
    卢旺达: [29.873888, -1.940278],
    西撒哈拉: [-12.885834, 24.215527],
    沙特阿拉伯: [45.079162, 23.885942],
    苏丹: [30.217636, 12.862807],
    南苏丹: [31.3069788, 6.876991899999999],
    塞内加尔: [-14.452362, 14.497401],
    所罗门群岛: [160.156194, -9.64571],
    塞拉利昂: [-11.779889, 8.460555],
    萨尔瓦多: [-88.89653, 13.794185],
    索马里兰: [46.8252838, 9.411743399999999],
    索马里: [46.199616, 5.152149],
    塞尔维亚共和国: [21.005859, 44.016521],
    苏里南: [-56.027783, 3.919305],
    斯洛伐克: [19.699024, 48.669026],
    斯洛文尼亚: [14.995463, 46.151241],
    瑞典: [18.643501, 60.12816100000001],
    斯威士兰: [31.465866, -26.522503],
    叙利亚: [38.996815, 34.80207499999999],
    乍得: [18.732207, 15.454166],
    多哥: [0.824782, 8.619543],
    泰国: [100.992541, 15.870032],
    塔吉克斯坦: [71.276093, 38.861034],
    土库曼斯坦: [59.556278, 38.969719],
    东帝汶: [125.727539, -8.874217],
    特里尼达和多巴哥: [-61.222503, 10.691803],
    突尼斯: [9.537499, 33.886917],
    土耳其: [35.243322, 38.963745],
    坦桑尼亚联合共和国: [34.888822, -6.369028],
    乌干达: [32.290275, 1.373333],
    乌克兰: [31.16558, 48.379433],
    乌拉圭: [-55.765835, -32.522779],
    美国: [-95.712891, 37.09024],
    乌兹别克斯坦: [64.585262, 41.377491],
    委内瑞拉: [-66.58973, 6.42375],
    越南: [108.277199, 14.058324],
    瓦努阿图: [166.959158, -15.376706],
    西岸: [35.3027226, 31.9465703],
    也门: [48.516388, 15.552727],
    南非: [22.937506, -30.559482],
    赞比亚: [27.849332, -13.133897],
    津巴布韦: [29.154857, -19.015438],
  };
  var data_tmp = [
    { name: "法国", value: 42 },
    { name: "新加坡", value: 42 },
    { name: "澳大利亚", value: 42 },
    { name: "美国", value: 42 },
    { name: "墨西哥", value: 42 },
    { name: "日本", value: 81 },
  ];
  var data_tmp2 = [
    [
      {
        name: "澳大利亚",
        value: 9100,
      },
      {
        name: "日本",
      },
    ],
    [
      {
        name: "日本",
        value: 9100,
      },
      {
        name: "新加坡",
      },
    ],
    [
      {
        name: "法国",
        value: 9100,
      },
      {
        name: "新加坡",
      },
    ],
    [
      {
        name: "美国",
        value: 9100,
      },
      {
        name: "日本",
      },
    ],
    [
      {
        name: "法国",
        value: 9100,
      },
      {
        name: "墨西哥",
      },
    ],
  ];
  var convertLinesData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[0].name];
      var toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
        res.push({
          fromName: dataItem[0].name,
          toName: dataItem[1].name,
          coords: [fromCoord, toCoord],
          value: dataItem[0].value,
        });
      }
    }
    return res;
  };
  var max = 480,
    min = 9; // todo
  var maxSize4Pin = 100,
    minSize4Pin = 20;
  
  var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
    }
    return res;
  };
  let echartsMapel: any = ref("");
  const echartsMap = (e: any) => (echartsMapel.value = e);
  const init = (china) => {
    // 基于准备好的dom，初始化echarts实例
    echarts.registerMap("world", china as any);
    var myChart = echarts.init(echartsMapel.value);
    // 指定图表的配置项和数据
    var options: any = {
      geo: {
        map: "world",
        zoom: 1,
        show: true,
        roam: true,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            areaColor: "#00D0FF",
            borderColor: "transparent", //线
            shadowColor: "#00D0FF", //外发光
            shadowBlur: 1,
            areaColor: {
              type: "pattern",
              image: "/vue.example/static/dian.png", //配置图片
              repeat: "repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
            },
          },
          emphasis: {
            areaColor: "#00D0FF", //悬浮区背景
          },
        },
      },
      series: [
        {
          name: "背景",
          type: "lines",
          zlevel: 2,
  
          lineStyle: {
            normal: {
              color: "#00EEF4",
              // 线条宽度
              width: 2,
  
              curveness: 0.4,
              type: [2, 2],
            },
          },
          label: {
            normal: {
              show: false,
              position: "middle",
              formatter: "{b}",
            },
          },
          data: convertLinesData(data_tmp2),
        },
        {
          label: {
            normal: {
              position: "left",
              color: "#FFF",
              show: true, //是否显示地名
              formatter: function(params) {
                return params.name;
              },
            },
            emphasis: {
              show: true,
            },
          },
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: "fill", //波纹绘制方式 stroke, fill
            scale: 6, //波纹圆环最大限制，值越大波纹越大
          },
          symbol: "circle",
          symbolSize: 4,
          itemStyle: {},
          color: "#00FFF6",
          type: "effectScatter",
          coordinateSystem: "geo",
          data: convertData(data_tmp),
        },
      ],
  
      tooltip: {
        show: false,
        trigger: "item",
      },
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(options);
  };
  const state = reactive({});
  onMounted(() => {
    fetch("/vue.example/echarts/custom.geo.json")
      .then(function(response) {
        //response.status表示响应的http状态码
        if (response.status === 200) {
          // json是返回的response提供的一个方法,
          // 会把返回的json字符串反序列化成对象,也被包装成一个Promise了
          return response.json();
          //
        } else {
          return {};
        }
      })
      .then(function(data) {
        //响应的内容
        init(data);
        // 响应数据格式化
      });
  });
  </script>
  
  <style scoped>
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184f;
  }
  </style>
  
    `;
  };
  